import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { MapPage,RouteLayout } from 'weaver-mobile-page';
import { Modal,Result,Icon, Tools } from 'weaver-mobile';
import ChangePositionStore from '../../../stores/card/changePoisitionStore';
const ButtonGroup = RouteLayout.ButtonGroup;
const alert = Modal.alert;
// const Normal = MapPage.Normal;
const getLabel = Tools.getLabel;
@inject('customerVisitStore')
@withRouter
@observer
export default class CustomerVisit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      PositionStore: new ChangePositionStore(),
  }
  }

  componentWillMount(){
    const {customerVisitStore,match,params} = this.props;
    const ps = params ? params : match.params;
    customerVisitStore.doNew(this,ps);

    const PositionStore = this.state.PositionStore;
    PositionStore.doInit(this);
  }

  componentDidMount() {
    const {customerVisitStore} = this.props;
    customerVisitStore.doInit();
  }

  componentWillUnmount(){
    const { customerVisitStore } = this.props;
    customerVisitStore.doClear();
  }

  
  render() {
    const store = this.props.customerVisitStore;
    const { mapPage } = this.state.PositionStore;
    const {initResponsed,initSuccessed,initFailedMsg} = store;
    if(initResponsed){
        if(initSuccessed){
          const {currentPosition,buttonProps} = store;
          let buttonGroupData = [];
          buttonGroupData.push({
            key: 'signIn',
            text: getLabel('20032','签到'),
            type: 'primary',
            disabled: buttonProps.disabled,
            loading: buttonProps.loading,
            onClick: () => alert('',getLabel('390922',"确定签到吗?"), [
              { text: getLabel('201','取消'), onPress: () => {} },
              { text: getLabel('83446','确定'), onPress: () => store.doSignOut(getLabel('20032','签到'), 3)},
            ])
          });
          buttonGroupData.push({
            key: 'signOut',
            text: getLabel('20033','签退'),
            disabled: buttonProps.disabled,
            loading: buttonProps.loading,
            onClick: () => alert('',getLabel('390923',"确定签退吗?"), [
                { text: getLabel('201','取消'), onPress: () => { } },
                { text: getLabel('83446','确定'), onPress: () => store.doSignOut(getLabel('20033','签退'), 4)},
            ])
          });
          return (
            <div className="crm_map">
                <div className="crm_map_title">
                    {currentPosition.address}
                </div>
                <div className="crm_map_content_visit">
                    <MapPage 
                        store={mapPage}
                        position={currentPosition.position}
                        address={currentPosition.address}
                        showIntroduction = {false} 
                    />
                </div>
                <div className="crm_form_btn">
                    <ButtonGroup data={buttonGroupData} />
                </div>
            </div>
          )
        }else{
          return (
            <div>
                <Result
                  img={<Icon type="cross-circle-o" className="crm_commerce_initFailedMsg" style={{ fill: '#F13642' }} />}
                  title=""
                  message={initFailedMsg}
                />
            </div>);
      }
    }else{
      return <div></div>;
    }
  }
}